<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .borderedBox {
            padding: 10px;
            border: 5px solid gray;
        }

        .greenBox {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="adBox" style="width: 300px;" class="greenBox" myName="迪艾薇">
        <button id="btnAddClass">增加样式</button>
        <button id="btnRemoveClass">移出样式</button>
        <button id="btnSwitch">切换样式</button>
    </div>

    <script>
        // ·通过选择器获得div和button
        // var box = document.getElementById("adBox")
        // var btn = document.querySelector("#btnAddClass")

        // // ·打印div的innerText文本节点 和innerHTML内部的全部HTML结构
        // console.log(box.innerText);
        // console.log(box.innerHTML);

        // // ·打印和设置div的行内样式
        // console.log(box.style);//CSSStyleDeclaration {好几吨样式（绝大部分是浏览器给的默认样式）}

        // 以直接写CSS的方式定义元素的行内样式
        // 所有的CSS样式都可以以驼峰的方式 去动态地进行设置
        // box.style.height = "200px"
        // box.style.backgroundColor = "red"
        // box.onclick = function(){
        //     if(box.style.backgroundColor==="yellow"){
        //         box.style.backgroundColor = "green"
        //     }else{
        //         box.style.backgroundColor = "yellow"
        //     }
        // }

        // 显示box的属性
        // console.log(box.id);
        // console.log(box.style);
        // console.log(box.className);

        // ·设置和获取div的自定义属性（index）
        // console.log(box);
        // console.log(box.getAttribute("id"),box.id,box["id"])
        // console.log(box.getAttribute("myName"))
        // box.setAttribute("myName","艾薇儿")

        // // ·点击按钮为div添加class样式   
        var box = document.getElementById("adBox")
        document.querySelector("#btnAddClass").onclick = function(){
            // box.className = box.className + " borderedBox"
            box.classList.add("borderedBox","a","b")
            console.log(box.classList);
        }

        // // ·移除div的class属性
        document.querySelector("#btnRemoveClass").onclick = function(){
            // box.className = box.className + " borderedBox"
            box.classList.remove("borderedBox")
        }

        document.querySelector("#btnSwitch").onclick = function(){
            if(box.classList.contains("borderedBox")){
                box.classList.remove("borderedBox")
            }else{
                box.classList.add("borderedBox")
            }
        }

    </script>
</body>

</html>